<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram</title>
</head>
<body>
    <canvas id="circuitCanvas" width="550" height="370"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');
        ctx.lineWidth = 1.5;
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';

        // Helper function to draw a line
        function drawLine(x1, y1, x2, y2) {
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.stroke();
        }

        // Helper function to draw a dot (junction/terminal)
        function drawDot(x, y) {
            ctx.beginPath();
            ctx.arc(x, y, 3, 0, 2 * Math.PI);
            ctx.fill();
        }

        // --- Start Drawing Circuit ---

        const y_battery = 100;
        const y_resistor = 175;
        const y_capacitor = 275;
        const x_junction_left = 100;
        const x_component_start = 150;
        const x_component_end = 270;
        const x_switch_contacts = 370;
        const x_switch_common = 470;

        // Common junction on the left
        drawDot(x_junction_left, 125);
        
        // --- Top Branch (Battery) ---
        drawLine(x_junction_left, 125, x_junction_left, y_battery);
        drawLine(x_junction_left, y_battery, x_component_start, y_battery);
        // Battery symbol (as in image)
        ctx.beginPath();
        ctx.moveTo(x_component_start, y_battery - 15);
        ctx.lineTo(x_component_start, y_battery + 15);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(x_component_end, y_battery - 20); // Positive terminal is longer
        ctx.lineTo(x_component_end, y_battery + 20);
        ctx.stroke();
        // Dashed line for battery
        ctx.beginPath();
        ctx.setLineDash([5, 5]);
        ctx.moveTo(x_component_start, y_battery);
        ctx.lineTo(x_component_end, y_battery);
        ctx.stroke();
        ctx.setLineDash([]); // Reset line dash
        // Battery label
        ctx.font = '18px Arial';
        ctx.textAlign = 'center';
        ctx.fillText('12 V', (x_component_start + x_component_end) / 2, y_battery - 25);
        // Wire to switch contact X
        drawLine(x_component_end, y_battery, x_switch_contacts, y_battery);
        drawDot(x_switch_contacts, y_battery);
        ctx.fillText('X', x_switch_contacts - 15, y_battery + 5);

        // --- Middle Branch (Resistor) ---
        drawLine(x_junction_left, 125, x_component_start, y_resistor);
        // Resistor symbol
        ctx.strokeRect(x_component_start, y_resistor - 10, x_component_end - x_component_start, 20);
        // Resistor label
        ctx.fillText('2.7 M\u03A9', (x_component_start + x_component_end) / 2, y_resistor - 20);
        // Wire to switch contact Y
        drawLine(x_component_end, y_resistor, x_switch_contacts, y_resistor);
        drawDot(x_switch_contacts, y_resistor);
        ctx.fillText('Y', x_switch_contacts - 15, y_resistor + 5);


        // --- Bottom Branch (Capacitors) ---
        const x_cap1_start = 140;
        const x_cap1_end = 190;
        const x_cap2_start = 240;
        const x_cap2_end = 290;

        drawLine(x_junction_left, 125, 60, 125);
        drawLine(60, 125, 60, y_capacitor);
        drawLine(60, y_capacitor, x_cap1_start, y_capacitor);
        // Capacitor 1 (22 µF)
        drawLine(x_cap1_start, y_capacitor - 20, x_cap1_start, y_capacitor + 20);
        drawLine(x_cap1_end, y_capacitor - 20, x_cap1_end, y_capacitor + 20);
        ctx.fillText('22 \u03BCF', (x_cap1_start + x_cap1_end) / 2, y_capacitor + 40);
        // Connecting wire
        drawLine(x_cap1_end, y_capacitor, x_cap2_start, y_capacitor);
        // Capacitor 2 (47 µF)
        drawLine(x_cap2_start, y_capacitor - 20, x_cap2_start, y_capacitor + 20);
        drawLine(x_cap2_end, y_capacitor - 20, x_cap2_end, y_capacitor + 20);
        ctx.fillText('47 \u03BCF', (x_cap2_start + x_cap2_end) / 2, y_capacitor + 40);
        // Wire to the right
        drawLine(x_cap2_end, y_capacitor, x_switch_common, y_capacitor);
        

        // --- Right Side (Switch S) ---
        const y_switch_common = (y_battery + y_resistor)/2 + 20;
        drawLine(x_switch_common, y_capacitor, x_switch_common, y_switch_common);
        drawDot(x_switch_common, y_switch_common);
        // Switch arm
        drawLine(x_switch_contacts, y_battery, x_switch_common, y_switch_common);
        ctx.fillText('S', (x_switch_contacts + x_switch_common)/2 + 10, (y_battery + y_switch_common)/2 - 5);


        // --- Figure Label ---
        ctx.font = 'bold 16px Arial';
        ctx.fillText('Fig. 5.2', 275, 350);
    </script>
</body>
</html>